<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/business/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script><![endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>柱状图 - 系统统计 - h-ui.admin.pro v1.0</title>
    <meta name="keywords" content="h-ui.admin.pro v1.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="h-ui.admin.pro v1.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<div class="wap-container">
    <nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
        首页
        <span class="c-gray en">/</span>
        系统统计
        <span class="c-gray en">/</span>
        柱状图
        <a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="Hui-admin-content clearfix">
        <div class="panel">
            <div class="panel-body">
                <div class="row clearfix">
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-header">
                                手机号运营商统计
                            </div>
                            <div class="panel-body">
                                <div id="echarts-1" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-header">
                                已经完善生日年龄统计
                            </div>
                            <div class="panel-body">
                                <div id="echarts-2" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <article>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/echarts/4.1.0.rc2/echarts.min.js"></script>
<script type="text/javascript">
    $(function () {
        // 手机号运营商
        var echarts1 = echarts.init(document.getElementById('echarts-1'));
        var echarts1_option = {
            title: {
                show: false
            },
            color: ['#1890ff'],
            tooltip: {
                trigger: 'item',
            },
            grid: {
                top: '3%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['其他', '电信', '移动', '联通']
            },
            barWidth: 24,
            emphasis: {
                itemStyle: {
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 2,
                }
            },
            series: [
                {
                    type: 'bar',
                    data: [200, 700, 800, 900],
                }
            ]
        }
        echarts1.setOption(echarts1_option);

        // 已经完善生日年龄统计
        var echarts2 = echarts.init(document.getElementById('echarts-2'));
        var echarts2_option = {
            title: {
                show: false
            },
            color: '#1890ff',
            grid: {
                top: '3%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['10岁以下', '10-15岁', '16-20岁', '21-25岁', '26-30岁', '31-35岁', '36-40岁', '41-45岁', '46-50岁', '50岁以上']
            },
            yAxis: {
                type: 'value'
            },
            label: {
                fontSize: 14,
                color: '#666',
            },
            series: [
                {
                    data: [10, 30, 35, 34, 50, 45, 43, 37, 30, 8],
                    type: 'bar',
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    barWidth: 24,
                }
            ]
        }
        echarts2.setOption(echarts2_option);
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
